<template>
	<view class="minh-bg">
		<nav-search ref="searcher" @methods="searchKey" :placeholder="'请输入要查询的ID/名称'"></nav-search>
		
		<view class="pos-fix fullwidth bg-ff" style="z-index: 10;">
			<filter-drop ref="filterDrop" :area="areaList" :type.sync="typeList" :status="statusList" :startDate="startDate" :endDate="endDate" :resetFilter="resetFilter" :recordOpen="recordOpen" @funArea="filterArea" @funType="filterType" @funDate="filterDate" @funStatus="filterStatus" @funCalendar="showCalendar" @funOpen="assignFilterDrop" @funRecord="changeOpenRecord"></filter-drop>
		</view>
		
		<view class="pt-4">
			<view class="px-2 py-m2 font24 col-mark" v-if="total != null">共 {{ total }} 件资产</view>
			<view class="px-2 pb-2">
				<asset-list :list="dataList" @methods="toDetail"></asset-list>
				<u-loadmore v-if="showLoadmore" :status="loadStatus" margin-top="20" @loadmore="searchList"/>
			</view>
		</view>
		<u-calendar v-model="showDatePicker" mode="range" @change="calenderHandler"></u-calendar>
	</view>
</template>

<script>
	import navSearch from '@/components/fa-nav-search/fa-nav-search.vue'
	import assetList from '@/components/fa-asset-list/fa-asset-list.vue'
	import filterDrop from './components/fa-filter-drop.vue'
	export default {
		components: {
			navSearch,
			filterDrop,
			assetList
		},
		data() {
			return {
				timerSearch: null,
				showDatePicker: false,
				recordOpen: false,
				startDate: '起始时间',
				endDate: '结束时间',
				areaList: [],
				typeList: [],
				statusList: [],
				dataList: [],
				total: null,
				form: {
					Name: undefined,
					Types: undefined,
					OrgGuids: undefined,
					Status: undefined,
					IsGetAlarm: undefined,
					StartTime: undefined,
					EndTime: undefined,
					PageIndex: 1,
					PageSize: 15
				},
				loadStatus: 'loading',
				showLoadmore: true,
				resetFilter: 0
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getOrgList();
			this.getTypeList();
			this.getStatusList();
			this.form.PageIndex = 1;
			this.searchList();
		},
		onHide() {
			this.$refs.searcher.reset();
			this.$refs.filterDrop.closeDrop();
			this.$refs.filterDrop.resetCheckData(1, 'search');
			this.$refs.filterDrop.resetCheckData(2, 'search');
			this.$refs.filterDrop.resetCheckData(3, 'search');
			this.$refs.filterDrop.resetCheckData(4, 'search');
			this.$refs.filterDrop.cacheFilterData();
			this.form = {
					Name: undefined,
					Types: undefined,
					OrgGuids: undefined,
					Status: undefined,
					IsGetAlarm: undefined,
					StartTime: undefined,
					EndTime: undefined,
					PageIndex: 1,
					PageSize: 15
				}
		},
		onReachBottom() {
			// 分页加载
			if (this.loadStatus != 'nomore') {
				this.form.PageIndex  = this.form.PageIndex + 1
				this.searchList()
			}
		},
		methods: {
			// 搜索列表
			searchList() {
				// 分页加载
				this.showLoadmore = true;
				this.loadStatus = 'loading';
				this.$api.getAssetList(this.form)
					.then(res => {
						if (res.code == 0) {
							this.total = res.data.Total;
							if (this.form.PageIndex > 1) {
								this.dataList.push(...res.data.Data)
							} else {
								this.dataList = res.data.Data
							}
							// 分页加载
							if (res.data.Page == res.data.TotalPage) {
								this.showLoadmore = false
								this.loadStatus = 'nomore'
							} else {
								this.loadStatus = 'loadmore'
							}
							if (this.dataList.length == 0) {
								this.showLoadmore = false
							}
						} else {
							// 分页加载
							this.showLoadmore = false;
							this.loadStatus = 'nomore'
						}
					})
					.catch(err => console.error(err));
			},
			
			// 获取房产筛选
			getOrgList() {
				let params = {
					OrgCode: "",
					OrgName: ""
				}
				this.$api.getOrgList(params)
					.then(res => {
						if (res.code == 0) {
							res.data.forEach(ele => {
								this.$set(ele, 'check', false)
							})
							this.areaList = res.data;
						}
					})
					.catch(err => console.error(err));
			},
			
			// 获取类型筛选
			getTypeList() {
				let params = {
					ParentKey: 'ASSET_TYPE',
					PageIndex: 1,
					PageSize: 10000
				}
				this.$api.getTypeStatusList(params)
					.then(res => {
						if (res.code == 0) {
							res.data.Data = res.data.Data.reverse();
							// 提取数据中的一级分类
							let newData = res.data.Data.filter(item => item.DictTypeKey == 'ASSET_TYPE');
							
							// 给一级分类传入二级类,并给一级/二级类添加属性
							newData.forEach(ele => {
								ele.check = false;
								ele.children = [{DictGuid: '', DictItemValue: '全部', check: false}];
								res.data.Data.forEach(v => {
									if (ele.DictItemKey == v.DictTypeKey) {
										this.$set(v, 'check', false)
										ele.children.push(v)
									}
								})
								if (ele.children.length > 1) {
									ele.childCheck = false;
									ele.count = 0;
								}else {
									delete ele.children
								}
							})
							this.typeList = newData;
						}
					})
					.catch(err => console.error(err));
			},
			
			// 获取状态筛选
			getStatusList() {
				let params = {
					ParentKey: 'ASSET_STATUS',
					PageIndex: 1,
					PageSize: 10000
				}
				this.$api.getTypeStatusList(params)
					.then(res => {
						if (res.code == 0) {
							res.data.Data = res.data.Data.filter(v => v.DictItemKey != 'ASSET_STATUS_0004');
							res.data.Data.push({ DictItemKey: '报警', DictItemValue: '报警' });
							res.data.Data.forEach(ele => {
								this.$set(ele, 'check', false)
							})
							this.statusList = res.data.Data;
						}
					})
					.catch(err => console.error(err));
			},
			
			// 搜索框文字
			searchKey(msg) {
				// 开启函数防抖，避免快速输入搜索时数据异常
				if (this.timerSearch) {
					clearTimeout(this.timerSearch)
				}
				this.timerSearch = setTimeout(()=>{
					// 动作
					this.resetFilter = Math.random();
					if (this.form.Name == msg) return;
					this.form.Name = msg;
					this.form.Types = undefined;
					this.form.OrgGuids = undefined;
					this.form.Status = undefined;
					this.form.StartTime = undefined;
					this.form.EndTime = undefined;
					this.form.IsGetAlarm = undefined;
					this.form.PageIndex = 1;
					this.searchList();
					
					this.timerSearch = null; //清空定时器
				}, 200)
			},
			
			// 筛选房产
			filterArea(data) {
				this.form.OrgGuids = data[0] == '' ? undefined : data;
				this.form.PageIndex = 1;
				this.searchList();
			},
			
			// 筛选类型
			filterType(data) {
				this.form.Types = data.arr[0] != '全部' ? data.dict : undefined;
				this.form.PageIndex = 1;
				this.searchList();
			},
			
			// 筛选日期
			filterDate(data) {
				if (data == 'reset' || data == 'all') {
					this.startDate = '起始时间';
					this.endDate = '结束时间';
					return
				}
				
				if ([0,7,30].includes(data)) {
					this.startDate = this.$comMethods.getDay(0-data);
					this.endDate = this.$comMethods.getDay(0);
				} else {
					this.form.StartTime = data ? this.$comMethods.timeStamp(data.sDate, 'start') : undefined;
					this.form.EndTime = data ? this.$comMethods.timeStamp(data.eDate, 'end') : undefined;
					this.form.PageIndex = 1;
					this.searchList();
				}
			},
			
			// 筛选状态
			filterStatus(data) {
				if (data[0] === '报警') {
					this.form.IsGetAlarm = 1;
					this.form.Status = undefined;
				} else if (data[0] === 'ASSET_STATUS_0001') {
					this.form.IsGetAlarm = 0;
					this.form.Status = undefined;
				} else {
					this.form.IsGetAlarm  = undefined;
					this.form.Status = data.length === 0 ? undefined : data[0] === undefined ? undefined : data;
				}
				this.form.PageIndex = 1;
				this.searchList();
			},
			
			// 显示日期插件
			showCalendar(obj) {
				this.showDatePicker = obj.show;
			},
			
			// 日期控件赋值
			calenderHandler(info) {
				this.startDate = info.startDate;
				this.endDate = info.endDate;
				info.date = "";
				this.changeOpenRecord();
			},
			
			// 更改状态记录
			changeOpenRecord() {
				this.recordOpen = !this.recordOpen;
			},
			
			// 打开下拉筛选时选中过的默认赋值
			assignFilterDrop(data, num) {
				if (num == 0) {
					this.areaList = JSON.parse(data);
				}else if (num == 1) {
					this.typeList = JSON.parse(data);
				}else {
					this.statusList = JSON.parse(data);
				}
			},
			
			// 页面跳转
			toDetail(data) {
				uni.navigateTo({
					url: `/pages/manage/itemAssetDetail?id=${data.Guid}`
				})
			}
			
		}
	}
</script>

<style lang="scss">
	
</style>
